{% extends "layout.html" %}
{% block title %}{% if command %}编辑命令{% else %}新增命令{% endif %}{% endblock %}

{% block head %}
<style>
    .form-container {
        background-color: #fdfdfd;
        padding: 30px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #555;
    }
    .form-group input[type="text"],
    .form-group textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 1rem;
        box-sizing: border-box; /* Important for padding and width */
    }
    .form-group textarea {
        min-height: 150px;
        font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    }
    .form-actions {
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        margin-top: 30px;
    }
    .action-btn {
        text-decoration: none;
        color: #fff;
        padding: 10px 20px;
        border-radius: 5px;
        font-size: 1em;
        transition: background-color 0.2s ease;
        border: none;
        cursor: pointer;
    }
    .save-btn {
        background-color: #007bff;
    }
    .save-btn:hover {
        background-color: #0056b3;
    }
    .cancel-btn {
        background-color: #6c757d;
    }
    .cancel-btn:hover {
        background-color: #5a6268;
    }
</style>
{% endblock %}

{% block content %}
<div class="form-container">
    <h1>{% if command %}编辑命令{% else %}新增命令{% endif %}</h1>
    
    <form method="post">
        <div class="form-group">
            <label for="name">名称 (必填)</label>
            <input type="text" id="name" name="name" value="{{ command.name if command else '' }}" required>
        </div>
        
        <div class="form-group">
            <label for="command">命令 (必填)</label>
            <textarea id="command" name="command" required>{{ command.command if command else '' }}</textarea>
        </div>
        
        <div class="form-group">
            <label for="notes">备注</label>
            <textarea id="notes" name="notes">{{ command.notes if command else '' }}</textarea>
        </div>
        
        <div class="form-actions">
            <a href="{{ url_for('commands') }}" class="action-btn cancel-btn">取消</a>
            <button type="submit" class="action-btn save-btn">保存</button>
        </div>
    </form>
</div>
{% endblock %}